<template>
  <div class="bind-box">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field v-model="bindForm.icName" name="姓名" label="姓名" placeholder="姓名"
          :rules="[{ required: true,pattern:/^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/, message: '请填写真实姓名' }]" />
        <van-field v-model="bindForm.icNo" maxlength="18" name="身份证" label="身份证" placeholder="身份证"
          :rules="[{ required: true,pattern:/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/, message: '请填写正确的身份证号码' }]" />
        <van-field v-model="bindForm.billPhone" type="number" maxlength="11" name="联系号码" label="联系号码" placeholder="联系号码"
          :rules="[{ required: true,pattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请填写正确的联系号码' }]" />
        <van-field v-model="bindForm.billNo" type="number" maxlength="19" name="银行卡账号" label="银行卡账号" placeholder="银行卡账号"
          :rules="[{ required: true, message: '请填写银行卡账号' }]" />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
import { showToast } from 'vant';
import api from '../api'
export default {
  setup() {
    const store = useStore()

    const route = useRoute()
    const router = useRouter()

    const state = reactive({
      type: null,

      bindForm: {},
    })

    function onSubmit() {
      const obj = {
        ...state.bindForm,
      }
      api.bindBank(obj).then(res => {
        if (res.code == '200') {
          showToast(res.msg)
          router.go(-1)
        } else {
          showToast(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    onMounted(() => {
      state.type = route.query.type || null
      store.commit("setNavBar", {
        title: state.type == 1 ? '绑定银行卡' : state.type == 2 ? '绑定支付宝' : state.type == 3 ? '绑定微信' : '',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
        path: '/index/uploadData'
      })
    })

    return {
      ...toRefs(state),
      onSubmit,
    }
  }
}
</script>

<style lang="scss" scoped>
.bind-box {
  box-sizing: border-box;
  padding: 20px 0;
}
</style>